import React, { Component } from 'react'
import { Avatar, Row, Col, Icon } from 'antd'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import '../../../less/index.less'
import CommentView from './commentView'
import getQuizType from '../../../constant/quiz-type-app-address'
import { FormattedMessage } from 'react-intl'

class ExcellentHomework extends Component {
  goExcellentQuizzes (userId, assignment, quizId) {
    const {programId, taskId} = this.props
    const { appContextPath } = this.props.settings
    const addressSuffix = getQuizType(assignment.type)
    const address = `${appContextPath}${addressSuffix}`

    const url = `${address}/student/${userId}/program/${programId}/task/${taskId}/assignment/${assignment.id}/quiz/${quizId}/excellent-quizzes`
    window.location.assign(url)
  }

  render () {
    const excellentQuizzes = this.props.excellentQuizzes
    const assignment = this.props.assignment
    return (
      <div>
        {excellentQuizzes.map((excellentReviewQuiz, index) => {
          return <Row className='margin-b-4' key={index}>
            <Col span={1}>
              <Avatar size='large' style={{backgroundColor: 'rgb(25, 115, 186)'}} icon='user' />
            </Col>
            <Col span={22}>
              <Row>
                <Col span={20}>
                  <h3> {excellentReviewQuiz.userName} <FormattedMessage id='的作业被评为优秀' /></h3>
                </Col>
                <Col span={4}>
                  <Icon type='clock-circle' />
                  <span><FormattedMessage id='时间' /> ：{excellentReviewQuiz.createTime.split(' ')[0]}</span>
                </Col>
              </Row>
              <div className='mark-down-wrap margin-t-1'>
                <a
                  onClick={this.goExcellentQuizzes.bind(this, excellentReviewQuiz.studentId, assignment, excellentReviewQuiz.quizId)}><FormattedMessage id='作业链接' /></a>
              </div>
              <CommentView studentId={excellentReviewQuiz.studentId} assignmentId={assignment.id}
                quizId={excellentReviewQuiz.quizId} />
            </Col>
          </Row>
        })}
      </div>
    )
  }
}

const mapStateToProps = ({settings}) => ({settings})
const mapDispatchToProps = () => {}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ExcellentHomework))
